<template>
	<view class="pageBox">
		<!--报名考试-->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					考试
				</view>
				
				<view class="right">
					<image src="/static/images/kaoshi.png" class="search-icon" 
					@click="openPop()"></image>
				</view>
			</view>
		</view>
				
				
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				
				<view class="header-box">
					<view class="pre-box">
						<image src="/static/images/jiantou.png" class="jiantou-image"></image>
						<view class="index">{{index+1}}</view>
					</view>
					<view class="title">{{item.title || ''}}（）</view>
				</view>
				
				<view class="body">
					<view class="answer-list" @click="chooseAnswer(index, question.num)" 
					v-for="(question, indexq) in item.data" :key="question.name">
						<view :class="item.is_choose === question.num ? 'shunxu-choose' : 'shunxu'">{{question.num || ''}}</view>
						<view class="answer">{{question.name || ''}}</view>
					</view>
				</view>
				
				
			</view>
		</view>
		
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		
		<view class="footer-box">
			<view class="study-btn" @click="submit()">提交试卷</view>
		</view>
		
		
		<uni-popup ref="popup" :mask-click="false">
			<view class="mask-body">
				<view class="mask-content">
					<view class="mask-title">考试须知</view>
					
					<view class="mask-desc">
						{{data.describe || ''}}
					</view>
					
					<view class="mask-btn" @click="closePop">我知道了</view>
				</view>
			</view>
			
		</uni-popup>
			
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			data:{},
			dataList: [],
			showPop: false,
		}
	},
	onLoad() {
		this.getData();
	},
	onShow(){
		
	},
	computed: {
		...mapState(['common'])
	},
	methods: {
		submit(){
			let that = this;
			let data = [];
			
			let is_ok = true;
			this.dataList.forEach(function(value, index){
				if(value.is_choose === ''){
					is_ok = false;
					that.$wanlshop.msg('请选择第'+(index+1)+'题');
					return false;
				}
				
				let tmp = {
					topic_id: value.id,
					correct:value.is_choose,
				};
				
				data.push(tmp);
			});
			
			data = JSON.stringify(data);
			
			if(is_ok)
			{
				uni.request({
					url: '/study/userpaper',
					data: {
						study_paper_id: this.data.id,
						data: data,
					},
					success: res => {
						res = res.res;
						if (res.code === 1) {
							that.$wanlshop.msg('提交成功');
						}
					}
				});
			}
		},
		chooseAnswer(index, num){
			this.dataList[index].is_choose = num;
			this.$set(this.dataList, index, this.dataList[index]);
		},
		openPop(){
			this.$refs.popup.open('top')
		},
		closePop(){
			this.$refs.popup.close()
		},
		getData(){
			let that = this;
			
			uni.request({
				url: '/study/studypaper',
				data: {
					
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.data = res.data;
						
						res.data.list.forEach(function(value, index){
							value.is_choose = '';
						});
						
						that.dataList = res.data.list;
					}
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.navbar-right {
	margin-right: 24rpx;
	display: flex;
}

.search-icon{
	width: 56rpx;
	height: 56rpx;
	margin-right: 34rpx;
	
	/*#ifdef MP*/
	margin-right: 10rpx !important;
	/*#endif*/
}

.list{
	background-color: #ffffff;
	
	.list-item{
		border: 2rpx dashed #EBEBEB;
		padding: 40rpx 0rpx;
		
		.header-box{
			display: flex;
		}
		
		.pre-box{
			position: relative;
		}
		
		.jiantou-image{
			width: 68rpx;
			height: 42rpx;
		}
		
		.index{
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 700;
			color: #FFFFFF;
			line-height: 40rpx;
			position: absolute;
			top: 0px;
			left: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 56rpx;
		}
		
		.title{
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 700;
			color: #333333;
			line-height: 40rpx;
		}
		
		.answer-list{
			margin-top: 30rpx;
			display: flex;
			align-items: center;
		}
		
		.body{
			padding: 0rpx 32rpx;
		}
		
		.shunxu{
			width: 56rpx;
			height: 56rpx;
			opacity: 1;
			border: 2rpx solid rgba(0,0,0,0.17);
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 700;
			color: #333333;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		
		.shunxu-choose{
			width: 56rpx;
			height: 56rpx;
			opacity: 1;
			border: 2rpx solid #9C3728;
			background-color: #9C3728;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 700;
			color: #ffffff;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		
		.answer{
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 35rpx;
		}
	}
	
}



.footer-box{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0rpx;
	background-color: #ffffff;
	width: 100%;
	padding: 20rpx 30rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	
	.study-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		background: #9C3728;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 35rpx;
	}
}

.mask-body{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;

	.mask-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 650rpx;
		height: 716rpx;
		background: #FFFFFF linear-gradient(180deg, #f9f3f3 0%, rgba(156,55,40,0) 92%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		flex-direction: column;
	}

	.mask-title{
		font-size: 44rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 67rpx;
	}
	
	.mask-desc{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 35rpx;
		overflow-y: auto;
		height: 454rpx;
		margin-top: 24rpx;
		padding: 0rpx 40rpx;
	}
	
	.mask-btn{
		width: 570rpx;
		height: 96rpx;
		background: #9C3728;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 38rpx;
		margin-top: 42rpx;
	}
}

.right{
	position: absolute;
	right: 0px;
}

.uni-popup{
	background-color: rgba(0,0,0,0.5);
}
</style>